<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>品优购商城-正名低价、品质保证、配送及时、轻松购物！</title>
		<link rel="shortcut icon" href="pin.ico"/>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<body>
		<!-- 快捷导航部分 -->
		<section class="shortcut"> 
			<!-- 版心 -->
			<div class="w">
				<div class="fl">
					<ul>
						<li>品优购欢迎你！&nbsp;</li>
						<li><a href="#">请登录&nbsp;&nbsp;</a><a href="#">免费注册</a></li>
					</ul>
				</div>
				<div class="fr">
					<ul>
						<li><a href="">我的订单</a></li>
						<li>|</li>
						<li class="arrow-ico"><a href="">我的品优购</a></li>
						<li>|</li>
						<li><a href="">品优购会员</a></li>
						<li>|</li>
						<li><a href="">企业采购</a></li>
						<li>|</li>
						<li class="arrow-ico"><a href="">关注品优购</a></li>
						<li >|</li>
						<li class="arrow-ico"><a href="">客户服务</a></li>
						<li>|</li>
						<li class="arrow-ico"><a href="">网站导航</a></li>
					</ul>
				</div>
			</div>
		</section>
		<!--header-->
		<header class="header w">
			<!-- logo -->
			<div class="logo">
				<a href="#" title="品优购商城">优品购商城</a>
			</div>
			<!-- search -->
			<div class="search">
				<div class="search-t">
					<input type="text"class="fl" placeholder="语言开发" id="tt">
					<button type="button" class="fr">搜索</button>
				</div>
				<div class="search-b">
					<ul>
						<li><a href="">优惠购首发</a></li>
						<li><a href="">亿元优惠</a></li>
						<li><a href="">9.9元团购</a></li>
						<li><a href="">美满90减30</a></li>
						<li><a href="">办公用品</a></li>
						<li><a href="">电脑</a></li>
						<li><a href="">通信</a></li>
					</ul>
				</div>
			</div>
			<!-- 购物车 -->
			<div class="shopcar">
				<a href="">
				<img src="img/shopcar.png">我的购物车
				<img src="img/dayu.png" alt="">
				<img src="img/red8.png" alt="">
				</a>
			</div>
		</header>
		<!-- nav -->
		<div class="nav">
			<div class="nav-w w">
				<div class="dropdown">
					<div class="dt">
						全部商品类型
					</div>
					<div class="dd">
						<ul>
							<li><a href="">家用电器</a></li>
							<li><a href="">手机、</a><a href="">数码、</a><a href="">通信</a></li>
							<li><a href="">电脑</a><a href="">办公</a></li>
							<li><a href="">家居、</a><a href="">家具、</a><a href="">家装、</a><a href="">厨具</a></li>
							<li><a href="">男装、</a><a href="">女装、</a><a href="">童装、</a><a href="">内衣</a></li>
							<li><a href="">个护化妆、</a><a href="">清洁用品、</a><a href="">宠物</a></li>
							<li><a href="">鞋靴、</a><a href="">箱包、</a><a href="">珠宝、</a><a href="">奢侈品</a></li>
							<li><a href="">运动户外、</a><a href="">钟表</a></li>
							<li><a href="">汽车、</a><a href="">汽车用品、</a></li>
							<li><a href="">母婴、</a><a href="">玩具乐器</a></li>
							<li><a href="">食品、</a><a href="">酒类、</a><a href="">生鲜、</a><a href="">特产</a></li>
							<li><a href="">医药保险</a></li>
							<li><a href="">图书、</a><a href="">音像、</a><a href="">电子书</a></li>
							<li><a href="">彩票、</a><a href="">旅行、</a><a href="">充值、</a><a href="">票务</a></li>
							<li><a href="">理财、</a><a href="">众筹、</a><a href="">白条、</a><a href="">保险、</a></li>
						</ul>
					</div>
				</div>
				<div class="navitems">
					<a href="#">服装城</a>
					<a href="#">美妆馆</a>
					<a href="#">传智超市</a>
					<a href="#">全球购</a>
					<a href="#">闪购</a>
					<a href="#">团购</a>
					<a href="#">拍卖</a>
					<a href="#">有趣</a>
				</div>
			</div>
		</div>
		<!-- main Start ------------------------------------------------------>
		<div class=" main w">
			<div class="focus">
				<ul>
					<li>
						<img src="img/focus.png" >
					</li>
				</ul>
			</div>
			<div class="newflash">
				<div class="newtop">品优购快报<span>更多&nbsp;</span></div>
				<div class="newad">
					<ul>
						<li><a href=""><span>[特惠]</span>备战开学季 全民半价购数码</a></li>
						<li><a href=""><span>[公告]</span>品优稳占家电网购六成份额</a></li>
						<li><a href=""><span>[特惠]</span>百元中秋全品类礼券免费领</a></li>
						<li><a href=""><span>[公告]</span>上品优生鲜 享阳澄湖大闸蟹</a></li>
						<li><a href=""><span>[特惠]</span>每日享折扣品优品游</a></li>
					</ul>
				</div>
				<div class="newapp">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				<div class="newbutton"><img src="img/newapp.png" style="width: 252px;" ></div>
			</div>
		</div>
		<!-- recomond推荐 -->
		<div class="recomond w">
			<div class="reco-l">
				<img src="img/jrtj.png" alt="">
			</div>
			<div class="reco-r">
				
			</div>
		</div>
		<!-- floor楼层区域*重点掌握tab-list/content -->
		<div class="floor">
			<div class="w jiadian">
				<div class="jd-hd">
					<h3>家用电器</h3>
					<div class="tab-list">
						<ul>
							<li><a href="" style="color: #c81623;">热门</a>|</li>
							<li><a href="">大家电</a>|</li>
							<li><a href="">生活电器</a>|</li>
							<li><a href="">厨房电器</a>|</li>
							<li><a href="">个护健康</a>|</li>
							<li><a href="">应季电器</a>|</li>
							<li><a href="">空气/净水</a>|</li>
							<li><a href="">新奇特</a>|</li>
							<li><a href="">高端电器</a></li>
						</ul>
					</div>
				</div>
				<div class="jd-bd">
					<div class="tab-content">
						<div class="tab-list-item">
							<div class="col-210">
								<ul>
									<li><a href="">节能补贴</a></li>
									<li><a href="">4K电视</a></li>
									<li><a href="">空气净化器</a></li>
									<li><a href="">IH电饭煲</a></li>
									<li><a href="">滚筒洗衣机</a></li>
									<li><a href="">电热水器</a></li>
								</ul>
								<a href=""><img src="img/col-210.jpg" ></a>
							</div>
							<div class="col-329">
								<a href=""><img src="img/col-210b.jpg" alt=""></a>
							</div>
							<div class="col-221">
								<a href=""><img src="img/col-210c1.jpg" alt=""></a>
								<a href=""><img src="img/col-210c2.jpg" alt=""></a>
							</div>
							<div class="col-221">
								<a href=""><img src="img/col-221.jpg" alt=""></a>
							</div>
							<div class="col-219">
								<a href=""><img src="img/col-219.jpg" alt=""></a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- shouji手机 -->
			<div class="w shouji">
				<div class="jd-hd">
					<h3>手机</h3>
					<div class="tab-list">
						<ul>
							<li><a href="" style="color: #c81623;">热门</a>|</li>
							<li><a href="">大家电</a>|</li>
							<li><a href="">生活电器</a>|</li>
							<li><a href="">厨房电器</a>|</li>
							<li><a href="">个护健康</a>|</li>
							<li><a href="">应季电器</a>|</li>
							<li><a href="">空气/净水</a>|</li>
							<li><a href="">新奇特</a>|</li>
							<li><a href="">高端电器</a></li>
						</ul>
					</div>
				</div>
				<div class="jd-bd">
					<div class="tab-content">
						<div class="tab-list-item">
							<div class="col-210">
								<ul>
									<li><a href="">节能补贴</a></li>
									<li><a href="">4K电视</a></li>
									<li><a href="">空气净化器</a></li>
									<li><a href="">IH电饭煲</a></li>
									<li><a href="">滚筒洗衣机</a></li>
									<li><a href="">电热水器</a></li>
								</ul>
								<a href=""><img src="img/col-210.jpg" ></a>
							</div>
							<div class="col-329">
								<a href=""><img src="img/col-210b.jpg" alt=""></a>
							</div>
							<div class="col-221">
								<a href=""><img src="img/col-210c1.jpg" alt=""></a>
								<a href=""><img src="img/col-210c2.jpg" alt=""></a>
							</div>
							<div class="col-221">
								<a href=""><img src="img/col-221.jpg" alt=""></a>
							</div>
							<div class="col-219">
								<a href=""><img src="img/col-219.jpg" alt=""></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- ------------------------------------------------------------- -->
		<!-- footer -->
		<div class="footer">
			<div class="foot-w w">
				<div class="mod-service">
					<ul>
						<li><img src="img/n1.png" alt=""><div class="ban">正品保障<br><span>正品保障,提供发票</span></div></li>
						<li><img src="img/n2.png" alt=""><div class="ban">极速物流<br><span>急速物流,急速送达</span></div></li>
						<li><img src="img/n3.png" alt=""><div class="ban">无忧售后<br><span>7天无理由退换货</span></div></li>
						<li><img src="img/n4.png" alt=""><div class="ban">特色服务<br><span>私人订制家电套餐</span></div></li>
						<li><img src="img/n5.png" alt=""><div class="ban">帮助中心</div></li>
					</ul>
				</div>
				<div class="mod-help">
					<dl>
						<dt>购物指南</dt>
						<dd>购物流程</dd>
						<dd>会员介绍</dd>
						<dd>生活旅行、团购</dd>
						<dd>常见问题</dd>
						<dd>大家电</dd>
						<dd>联系客服</dd>
					</dl>
					<dl>
						<dt>购物指南</dt>
						<dd>购物流程</dd>
						<dd>会员介绍</dd>
						<dd>生活旅行、团购</dd>
						<dd>常见问题</dd>
						<dd>大家电</dd>
						<dd>联系客服</dd>
					</dl>
					<dl>
						<dt>购物指南</dt>
						<dd>购物流程</dd>
						<dd>会员介绍</dd>
						<dd>生活旅行、团购</dd>
						<dd>常见问题</dd>
						<dd>大家电</dd>
						<dd>联系客服</dd>
					</dl>
					<dl>
						<dt>购物指南</dt>
						<dd>购物流程</dd>
						<dd>会员介绍</dd>
						<dd>生活旅行、团购</dd>
						<dd>常见问题</dd>
						<dd>大家电</dd>
						<dd>联系客服</dd>
					</dl>
					<dl>
						<dt>购物指南</dt>
						<dd>购物流程</dd>
						<dd>会员介绍</dd>
						<dd>生活旅行、团购</dd>
						<dd>常见问题</dd>
						<dd>大家电</dd>
						<dd>联系客服</dd>
					</dl>
					<dl>
						<dt>帮助中心</dt>
						<dd><img src="img/vxcode.png" alt=""><br>品优购客户端</dd>
					</dl>
				</div>
				<div class="mod-copyright">
					关于我们 &nbsp;| &nbsp; 联系我们  &nbsp;|&nbsp;  联系客服 &nbsp; | &nbsp; 商家入驻  &nbsp;|  &nbsp;营销中心 &nbsp; |&nbsp;  手机品优购 &nbsp; | &nbsp; 友情链接  &nbsp;| &nbsp; 销售联盟 &nbsp; | &nbsp; 品优购社区  &nbsp;| &nbsp; 品优购公益  &nbsp;| &nbsp; English Site &nbsp; | &nbsp; Contact U <br>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>京ICP备08001421号京公网安备110108007702
				</div>
			</div>
		</div>
		<!-- js -->
		<script>
			var text=document.getElementById('tt')
			text.onfocus=function(){
				if(text.placeholder=='语言开发'){//我焦点文本框它里面的值为‘手机’那么就消失
					text.placeholder='';
				}
			}
			text.onblur=function(){
				if(text.placeholder==''){
					text.placeholder='语言开发';
				}
				text.style.color='gray'
			}
		</script>
	</body>
</html>